<template>
  <div class="outer">
    <h1>Header组件</h1>
    <p v-red>v-red指令</p>
    <p>v-red指令</p>
    <p>v-red指令</p>
    <p>v-red指令</p>
    <p v-size="40">v-size指令</p>
    <p v-size="50">v-size指令</p>

    <p v-red>v-red指令</p>
  </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      count: 10000,
    };
  },
  /* 
    自定义指令
      * 指令:一般是用来操作DOM的一个命令
      * 自定义指令的定义
        - 全局自定义指令
        - 局部自定义指令
      * 自定义指令的定义过程
        - 通过配置项的 directives属性配置自定义指令函数
        - 自定义指令函数的第一个参数是当前设置指令的DOM元素
        - 自定义指令函数的第二个参数是当前指令的详细信息对象,其中value属性是指令被赋的值
        - 自定义指令在模板中使用 `v-自定义指令名称`使用
  */
  directives: {
    red(ele) {
      console.log("v-red指令被调用", ele);
      ele.style.background = "red";
    },
    size(ele, num) {
      console.log(ele, num);
      console.log(num.value);
      ele.style.fontSize = num.value + "px";
    },
  },
};
</script>

<style scoped>
.outer {
  background: yellow;
}
</style>
